<template>
    <div>
        <video
                ref="videoPlayer"

                class="video-js vjs-default-skin"


        >

            <!--<div class="vjs-subs-caps-button  vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"-->
                 <!--aria-live="polite" aria-expanded="false" aria-haspopup="true">-->
                <!--<div class="vjs-menu" role="presentation">-->
                    <!--<ul class="vjs-menu-content" role="menu">-->
                        <!--<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" @click="changeVideo()">普通</li>-->
                        <!--<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" @click="changeVideo()">标清</li>-->
                        <!--<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" @click="changeVideo()">高清</li>-->
                    <!--</ul>-->
                <!--</div>-->
                <!--<button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite"-->
                        <!--title="清晰度切换" aria-disabled="false"><span aria-hidden="true"-->
                                                                  <!--class="vjs-icon-placeholder"></span><span-->
                        <!--class="vjs-control-text">清晰度切换</span></button>-->
            <!--</div>-->
        </video>
        <!--<video class="w-full" :src="src" controls></video>-->
        <!--{{this.videoId}}-->
    </div>
</template>

<script>
    import videojs from 'video.js'

    export default {
        props: {
            videoId: {type: String, required: true}
        },
        data() {
            return {
                playInfo: null, player: null, options: {
                    autoplay: true,
                    controls: true,
                }, currentPlayItem: 0
            }
        },
        watch: {
            playInfo() {
                this.setSrc();
            }, currentPlayItem() {
                this.setSrc();
            }
        },
        methods: {
            setSrc() {
                this.player.src(this.playInfo[this.currentPlayItem].PlayURL);
                this.player.play()
            },
            changeVideo() {
            }
        },
        created() {
            axios.get('/vod-play-info?video_id=' + this.videoId).then(res => {
                this.playInfo = res.data.PlayInfo;

            })

        }, mounted() {
            this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
                console.log('onPlayerReady', this);
            })
        },
        beforeDestroy() {
            if (this.player) {
                this.player.dispose()
            }
        }
    }
</script>

<style scoped>
    .video-js {
        width: 100%;
    }
</style>